<template>
    <el-table
            :data="articles.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
        <el-table-column
                label="标题"
                prop="title">
        </el-table-column>
        <el-table-column
                label="发布时间"
                prop="publishtime"
                :formatter="dateFormat">
        </el-table-column>
        <el-table-column
                label="修改时间"
                prop="modifytime"
                :formatter="dateFormat">
        </el-table-column>
        <el-table-column
                label="是否删除"
                prop="delflag">
        </el-table-column>
        <el-table-column align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        v-if="!scope.row.delflag">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        v-if="!scope.row.delflag">删除</el-button>
                <el-button
                        size="mini"
                        type="success"
                        @click="handleRecovery(scope.$index, scope.row)"
                        v-if="scope.row.delflag">恢复</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "ArticleList",
        data() {
            return {
                articles: [],
                search: ''
            }
        },
        methods: {
            getlist(){
                this.articles = [];
                this.$axios({
                    url: "/article/allArticle",
                    method: "get",
                }).then(res => {
                    console.log(res);
                    if(res.code===200){
                        this.articles = res.data;
                    }else {
                        this.$message(res.msg);
                    }
                });
            },

            dateFormat(row, column, cellValue, index){
                if(cellValue===null) return null;
                return cellValue.slice(0,10);
            },

            handleEdit(index, row) {
                const article = this.articles[index];
                this.$router.push({name: 'Write', params: {article: article}});
            },
            handleRecovery(index, row){
                this.$axios({
                    url: "/article/recovery?id="+row.id,
                    method: "get",
                }).then(res => {
                    console.log(res);
                    if(res.code===200){
                        this.$message({
                            type: 'success',
                            message: '恢复成功!'
                        });
                        this.getlist();
                    }else {
                        this.$message.warning(res.msg);
                    }
                });
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        url: "/article/delete?id="+row.id,
                        method: "get",
                    }).then(res => {
                        console.log(res);
                        if(res.code===200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getlist();
                        }else {
                            this.$message.warning(res.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        mounted:function () {
            this.getlist();
        }
    }
</script>

<style scoped>

</style>